<template>
  <div>
    <el-dialog
      :visible="videoDialogVisible"
      width="800px"
      height='700px'
      @close="handleClose">
      <div class="video-box">
        <video :src="videoURL" controls="controls" autoplay></video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    videoURL: {
      type: [String, null],
      default: ''
    },
    videoDialogVisible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {}
  },

  created () {},

  methods: {
    handleClose () {
      this.$emit('update:videoDialogVisible', false)
    }
  }
}
</script>

<style scoped lang='less'>
.el-dialog__body {
  position: relative;
  .video-box {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 250px;
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
